import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
// 一定子组件先挂载完成，才到父亲节点
class Child extends React.Component {
  constructor(props) {
    super();
    this.state = {
      test: "我是state",
    };
    console.log("constructor");
  }
  //   componentWillMount() {
  //     console.log("child componentWillMount");
  //   }
  componentDidMount() {
    console.log("child componentDidMount");
  }

  static getDerivedStateFromProps(nextProps, preState) {
    console.log(nextProps, preState, "getDerivedStateFromProps");
    return null;
  }
  // 组件即将接受新的参数
  // 即将接受,说明还没收到
  //   componentWillReceiveProps(new_props) {
  //     console.log(new_props, this.props, "child componentWillReceiveProps");
  //   }
  // 即将更新
  // 我都准备好了,那参数一定都是新的
  // 这里还是有机会拿到旧的props
  //   componentWillUpdate(props, state) {
  //     console.log(props, state, this.props, "child componentWillUpdate");
  //   }
  // 已经更新
  // react可以非常细粒度的控制组件的渲染状态
  componentDidUpdate(old_props, old_state, data) {
    console.log(
      old_props,
      old_state,
      this.props,
      data,
      "child componentDidUpdate"
    );
  }
  // 为了控制组件是否更新
  //   shouldComponentUpdate(new_props, state) {
  //     console.log(new_props, this.props, state, "child shouldComponentUpdate");
  //     if (new_props.count === 2) {
  //       return false;
  //     } else {
  //       return true;
  //     }
  //   }

  // render 才会进行新旧props的对比，找出更新的dom
  // 执行时机在 componentDidUpdate 前面 在 render之后
  getSnapshotBeforeUpdate(old_props, old_state) {
    console.log(old_props, old_state, "child getSnapshotBeforeUpdate");
    return { test: "componentDidUpdate" };
  }
  render() {
    console.log("child render");
    return <div>child{this.props.count}</div>;
  }
}
// 挂载阶段
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
    // console.log("constructor");
  }
  //   componentWillMount() {
  //     // console.log("componentWillMount");
  //   }
  // 在项目中用的很多
  componentDidMount() {
    // console.log("componentDidMount");
    // setState是异步的,所以setState只要调用了就会render,但是不会调用一次就render一次
    this.setState({
      count: 2,
    });
  }

  render() {
    // console.log("render");
    return (
      <div>
        <h1>Hello World</h1>
        <Child />
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
